---
title: API de Integrações Astro
i18nReady: true
---
import Since from '~/components/Since.astro'

**Integrações Astro** adicionam novas funcionalidades e comportamentos ao seu projeto com apenas algumas linhas de código.

Esta página de referência é para qualquer um que esteja escrevendo sua própria integração. Para aprender como utilizar uma integração em seu projeto, veja o nosso guia, [Usando Integrações](/pt-br/guides/integrations-guide/) no lugar.

## Exemplos

As integrações Astro oficiais podem ser utilizadas como referência enquanto você constrói suas próprias integrações.

- **Renderizadores:** [`lit`](/pt-br/guides/integrations-guide/lit/), [`svelte`](/pt-br/guides/integrations-guide/svelte/), [`react`](/pt-br/guides/integrations-guide/react/), [`preact`](/pt-br/guides/integrations-guide/preact/), [`vue`](/pt-br/guides/integrations-guide/vue/), [`solid`](/pt-br/guides/integrations-guide/solid-js/)
- **Bibliotecas:** [`tailwind`](/pt-br/guides/integrations-guide/tailwind/), [`partytown`](/pt-br/guides/integrations-guide/partytown/)
- **Funcionalidades:** [`sitemap`](/pt-br/guides/integrations-guide/sitemap/)

## Referência Rápida da API

```ts
interface AstroIntegration {
  name: string;
  hooks: {
    'astro:config:setup'?: (options: {
      config: AstroConfig;
      command: 'dev' | 'build';
      isRestart: boolean;
      updateConfig: (newConfig: Record<string, any>) => void;
      addRenderer: (renderer: AstroRenderer) => void;
      addWatchFile: (path: URL | string) => void;
      addClientDirective: (directive: ClientDirectiveConfig) => void;
      injectScript: (stage: InjectedScriptStage, content: string) => void;
      injectRoute: ({ pattern: string, entrypoint: string }) => void;
      logger: AstroIntegrationLogger;
    }) => void;
    'astro:config:done'?: (options: { config: AstroConfig; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:server:setup'?: (options: { server: vite.ViteDevServer; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:server:start'?: (options: { address: AddressInfo; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:server:done'?: (options: { logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:build:start'?: (options: { logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:build:setup'?: (options: {
      vite: ViteConfigWithSSR;
      pages: Map<string, PageBuildData>;
      target: 'client' | 'server';
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:generated'?: (options: { dir: URL; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:build:ssr'?: (options: { 
        manifest: SerializedSSRManifestm; 
        entryPoints: Map<RouteData, URL>;
        logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:done'?: (options: { dir: URL; routes: RouteData[]; logger: AstroIntegrationLogger; }) => void | Promise<void>;
  };
}
```

## Hooks

### `astro:config:setup`

**Próximo hook:** [`astro:config:done`](#astroconfigdone)

**Quando:** Durante a inicialização, antes da configuração do [Vite](https://vitejs.dev/config/) ou [Astro](/pt-br/reference/configuration-reference/) ser resolvida.

**Por que:** Para estender a configuração do projeto. Isso inclui atualizar a [configuração do Astro](/pt-br/reference/configuration-reference/), aplicar [plugins Vite](https://vitejs.dev/guide/api-plugin.html), adicionar renderizadores de componentes, e injetar scripts na página.

```ts
'astro:config:setup'?: (options: {
  config: AstroConfig;
  command: 'dev' | 'build';
  isRestart: boolean;
  updateConfig: (newConfig: Record<string, any>) => void;
  addRenderer: (renderer: AstroRenderer) => void;
  addClientDirective: (directive: ClientDirectiveConfig) => void;
  addWatchFile: (path: URL | string) => void;
  injectScript: (stage: InjectedScriptStage, content: string) => void;
  injectRoute: ({ pattern: string, entrypoint: string }) => void;
  logger: AstroIntegrationLogger;
}) => void;
```

#### Opção `config`

**Tipo:** `AstroConfig`

Uma cópia de somente leitura da [configuração Astro](/pt-br/reference/configuration-reference/) suprida pelo usuário. Isto é resolvido _antes_ de qualquer outra integração ser executada. Se você precisa de uma cópia da configuração depois de todas as integrações completarem seus processos de atualização da configuração, [veja o hook `astro:config:done`](#astroconfigdone). 

#### Opção `command`

**Tipo:** `'dev' / 'build'`

- `dev` - Projeto é executado a partir de `astro dev` ou `astro preview`
- `build` - Projeto é executado a partir de `astro build`

#### Opção `isRestart`

**Tipo:** `boolean`

`false` quando o servidor de desenvolvimento inicia, `true` quando um recarregamento é provocado. Útil para detectar quando esta função é chamada mais de uma vez.

#### Opção `updateConfig`

**Tipo:** `(newConfig: Record<string, any>) => void;`

Uma função de callback para atualizar a [configuração Astro](/pt-br/reference/configuration-reference/) suprida pelo usuário. Qualquer configuração que você providenciar **será mesclada com a configuração do usuário + atualizações da configuração de outras integrações**, então você está livre para omitir as chaves!

Por exemplo, digamos que você precisa fornecer um plugin [Vite](https://vitejs.dev/) ao projeto do usuário:

```js
import bananaCSS from '@vitejs/official-banana-css-plugin';

export default {
  name: 'banana-css-integration',
  hooks: {
    'astro:config:setup': ({ updateConfig }) => {
      updateConfig({
        vite: {
          plugins: [bananaCSS()],
        }
      })
    }
  }
}
```

#### Opção `addRenderer`

**Tipo:** `(renderer:` [`AstroRenderer`](https://github.com/withastro/astro/blob/fdd607c5755034edf262e7b275732519328a33b2/packages/astro/src/%40types/astro.ts#L872-L883) `) => void;`
**Exemplos:** [`lit`](https://github.com/withastro/astro/blob/main/packages/integrations/lit/src/index.ts), [`svelte`](https://github.com/withastro/astro/blob/main/packages/integrations/svelte/src/index.ts), [`react`](https://github.com/withastro/astro/blob/main/packages/integrations/react/src/index.ts), [`preact`](https://github.com/withastro/astro/blob/main/packages/integrations/preact/src/index.ts), [`vue`](https://github.com/withastro/astro/blob/main/packages/integrations/vue/src/index.ts), [`solid`](https://github.com/withastro/astro/blob/main/packages/integrations/solid/src/index.ts)

Uma função de callback para adicionar um renderizador de um framework de componentes (ex. React, Vue, Svelte, etc). Você pode explorar os exemplos e definições de tipagem acima para opções mais avançadas, mas aqui estão as duas principais opções que você precisa estar ciente sobre:

- `clientEntrypoint` - caminho para um arquivo que é executado no cliente sempre que seu componente é utilizado. Esta é principalmente utilizado para renderizar ou hidratar seu componente com JS.
- `serverEntrypoint` - caminho para um arquivo que é executado durante requisições no lado do servidor ou builds estáticas sempre que seu componente é utilizado. Esta deve renderizar componentes para uma marcação estática, com hooks para hidratação aonde aplicável. [o callback `renderToString` do React](https://pt-br.react.dev/reference/react-dom/server/renderToString) é um exemplo clássico.

#### Opção `addWatchFile`

**Tipo:** `URL | string`

Se sua integração depende em algum arquivo de configuração que o Vite não observa e/ou precisa de um reinício completo do servidor de desenvolvimento para funcionar, o adicione com `addWatchFile`. Sempre que o arquivo mudar, o servidor de desenvolvimento do Astro será recarregado (você pode verificar quando um recarregamento acontece com `isRestart`).

Exemplo de uso:

```js
// Deve ser um caminho absoluto!
addWatchFile('/home/usuario/.../minha-configuracao.json');
addWatchFile(new URL('./tailwind.config.js', config.root));
```

#### Opção `addClientDirective`

<Since v="2.6.0" />

**Tipo:** `(directive:` [`ClientDirectiveConfig`](https://github.com/withastro/astro/blob/00327c213f74627ac9ca1dec774efa5bf71e9375/packages/astro/src/%40types/astro.ts#L1872-L1875) `) => void;`

Adiciona uma [diretiva de cliente customizada](/pt-br/reference/directives-reference/#diretivas-de-cliente-customizadas) para ser usada em arquivos `.astro`.

Note que entrypoints de diretivas são agrupados somente através do esbuild e devem ser mantidos pequenos para que não deixem a hidratação de componentes mais lenta.

Exemplo de uso:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import diretivaClique from './astro-diretiva-clique/registrar.js'

// https://astro.build/config
export default defineConfig({
  integrations: [
    diretivaClique()
  ],
});
```

```js title="astro-diretiva-clique/registrar.js"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "client:click",
  hooks: {
    "astro:config:setup": ({ addClientDirective }) => {
      addClientDirective({
        name: "click",
        entrypoint: "./astro-diretiva-clique/clique.js",
      });
    },
  },
});
```

```js title="astro-diretiva-clique/clique.js"
/**
 * Hidrata no primeiro clique da janela
 * @type {import('astro').ClientDirective}
 */
export default (load, opts, el) => {
  window.addEventListener('click', async () => {
    const hidrate = await load()
    await hidrate()
  }, { once: true })
}
```

Você também pode adicionar tipos para as diretivas no seu arquivo de definição de tipos da sua biblioteca:

```ts title="astro-diretiva-clique/index.d.ts"
import 'astro'
declare module 'astro' {
  interface AstroClientDirectives {
    'client:clique'?: boolean
  }
}
```

#### Opção `injectRoute`

**Tipo:** `({ pattern: string, entrypoint: string }) => void;`

Uma função de callback para injetar rotas em um projeto Astro. Rotas injetadas podem ser [páginas `.astro`](/pt-br/basics/astro-pages/) ou [handlers de rotas `.js` e `.ts`](/pt-br/guides/endpoints/#endpoints-de-arquivos-estáticos).

`injectRoute` recebe um objeto com um `pattern` e um `entrypoint`.

- `pattern` - aonde a rota deve ser inserida no navegador, por exemplo `/foo/bar`. Um `pattern` pode utilizar a sintaxe de caminho de arquivos do Astro para indicar rotas dinâmicas, por exemplo `/foo/[bar]` ou `/foo/[...bar]`. Note que uma extensão de arquivo **não** é necessária no `pattern`.
- `entrypoint` - apenas um especificador de módulo apontando para a página `.astro` ou handler de rota `.js`/`.ts` que manipula a rota indicada no `pattern`.

##### Exemplo de uso

```js
injectRoute({
  // Usa o padrão de sintaxe do Astro para rotas dinâmicas.
  pattern: '/subpasta/[dinamico]',
  // Usa a sintaxe de caminho relativo para uma rota local.
  entrypoint: './src/pagina-dinamica.astro'
});
```

Para uma integração projetada para ser instalada em outros projetos, utilize o nome do seu pacote para referenciar o entrypoint da rota.
O seguinte exemplo mostra um pacote publicado para o npm como `@chique/painel` injetando uma rota de painel:

```js
injectRoute({
  pattern: '/painel-chique',
  entrypoint: '@chique/painel/painel.astro'
});
```

#### Opção `injectScript` 

**Tipo:** `(stage: InjectedScriptStage, content: string) => void;`

Uma função de callback para injetar uma string de conteúdo JavaScript em todas as páginas.

O **`stage`** indica como este script (o `content`) deve ser inserido. Alguns stages permitem inserir scripts sem modificação, enquanto outros permitem otimizações durante [a etapa de bundling do Vite](https://vitejs.dev/guide/build.html):

- `"head-inline"`: Injetado em uma tag script no `<head>` de cada página. **Não é** otimizado ou resolvido pelo Vite.
- `"before-hydration"`: Importado no lado do cliente, antes do script de hidratação ser executado. Otimizado e resolvido pelo Vite.
- `"page"`: Similar a `head-inline`, exceto que o script injetado é transformado por Vite e passa por bundle junto com quaisquer outras tags `<script>` definidas dentro de componentes Astro na página. O script será carregado com um `<script type="module">` no resultado final da página, otimizado e resolvido pelo Vite.
- `"page-ssr"`: Importado como um módulo separado no frontmatter de cada componente de página Astro. Por conta desse stage importar seu script, a global `Astro` não está disponível e seu script será executado apenas uma vez quando o `import` for analisado pela primeira vez.

    O principal uso para o stage `page-ssr` é para injetar um `import` de CSS em cada página para ser otimizado e resolvido pelo Vite:
    ```js
    injectScript('page-ssr', 'import "estilos-globais.css";');
    ```

### `astro:config:done`

**Hook anterior:** [`astro:config:setup`](#astroconfigsetup)

**Próximo hook:** [`astro:server:setup`](#astroserversetup) quando estiver sendo executado no modo "dev", ou [astro:build:start](#astrobuildstart) durante builds em produção

**Quando:** Após a configuração do Astro ter sido resolvida e outras integrações tiverem executado seus hooks `astro:config:setup`.

**Por que:** Para obter a configuração final para uso em outros hooks.

```js
'astro:config:done'?: (options: { config: AstroConfig }) => void | Promise<void>;
```

#### Opção `config`

**Tipo:** `AstroConfig`

Uma cópia de somente leitura da [configuração Astro](/pt-br/reference/configuration-reference/) suprida pelo usuário. Esta é resolvida _após_ outras integrações serem executadas.

### `astro:server:setup`

**Hook anterior:** [`astro:config:done`](#astroconfigdone)

**Próximo hook:** [`astro:server:start`](#astroserverstart)

**Quando:** Logo após o servidor do Vite ser criado no modo "dev", porém antes do evento `listen()` ser disparado. [Veja a API createServer do Vite](https://vitejs.dev/guide/api-javascript.html#createserver) para saber mais.

**Por que:** Para atualizar as configurações do servidor Vite e middleware.

```js
'astro:server:setup'?: (options: { server: vite.ViteDevServer }) => void | Promise<void>;
```

#### Opção `server`

**Tipo:** [`ViteDevServer`](https://vitejs.dev/guide/api-javascript.html#vitedevserver)

Uma instância mutável do servidor Vite usado no modo "dev". Por exemplo, esta é [utilizada pela nossa integração Partytown](/pt-br/guides/integrations-guide/partytown/) para injetar o servidor Partytown como um middleware:

```js
export default {
  name: 'partytown',
  hooks: {
    'astro:server:setup': ({ server }) => {
      server.middlewares.use(
        function middleware(req, res, next) {
          // manejar requisições
        }
      );
    }
  }
}
```

### `astro:server:start`

**Hook anterior:** [`astro:server:setup`](#astroserversetup)

**Próximo hook:** [`astro:server:done`](#astroserverdone)

**Quando:** Logo após o evento `listen()` do servidor ser disparado.

**Por que:** Para interceptar requisições de rede de um endereço específico. Se você pretende utilizar esse endereço para middleware, considere utilizar `astro:server:setup` no lugar.

```js
'astro:server:start'?: (options: { address: AddressInfo }) => void | Promise<void>;
```

#### Opção `address`

**Tipo:** [`AddressInfo`](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules__types_node_net_d_._net_.addressinfo.html)

O endereço, família e número de porta suprido pelo [módulo Net do NodeJS](https://nodejs.org/api/net.html).

### `astro:server:done`

**Hook anterior:** [`astro:server:start`](#astroserverstart)

**Quando:** Logo após o servidor de desenvolvimento ser fechado.

**Por que:** Para executar quaisquer eventos de limpeza que você pode ativar durante os hooks `astro:server:setup` ou `astro:server:start`.

```js
'astro:server:done'?: () => void | Promise<void>;
```

### `astro:build:start`

**Hook anterior:** [`astro:config:done`](#astroconfigdone)

**Próximo hook:** [`astro:build:setup`](#astrobuildsetup)

**Quando:** Após o evento `astro:config:done`, porém antes da build para produção começar.

**Por que:** Para definir quaisquer objetos globais ou clientes necessários durante a build para produção. Esta também pode estender as opções de configuração de build na [API de adaptadores](/pt-br/reference/adapter-reference/).

```js
'astro:build:start'?: () => void | Promise<void>;
```

### `astro:build:setup`

**Hook anterior:** [`astro:build:start`](#astrobuildstart)

**Próximo hook:** [`astro:build:ssr`](#astrobuildssr)

**Quando:** Após o hook `astro:build:start`, executado imediatamente antes da build.

**Por que:** Nesse ponto, a configuração Vite para a build foi completamente construída, logo essa é sua última chance de modificá-la. Isto pode ser útil para por exemplo sobrescrever alguma configuração padrão. Se você não tiver certeza se deve utilizar este hook ou `astro:build:start`, então utilize `astro:build:start` no lugar.

```js
'astro:build:setup'?: (options: {
  vite: ViteConfigWithSSR;
  pages: Map<string, PageBuildData>;
  target: 'client' | 'server';
}) => void | Promise<void>;

```

### `astro:build:generated`

**Hook anterior:** [`astro:build:setup`](#astrobuildsetup)

**Quando:** Após uma build estática de produção terminou de gerar rotas e assets.

**Por que:** Para acessar rotas geradas e assets **antes** que artefatos de build sejam limpos. Este é um uso de caso bem incomum. Nós recomendamos usar [`astro:build:done`](#astrobuilddone) a não ser que você realmente precise acessar oss arquivos gerados antes da limpeza.

```js
'astro:build:generated'?: (options: { dir: URL }) => void | Promise<void>;
```

### `astro:build:ssr`

**Hook anterior:** [`astro:build:setup`](#astrobuildsetup)

**Quando:** Após uma build SSR para produção tiver sido completada.

**Por que:** Para conseguir acesso ao manifesto de SSR e mapa dos pontos de entrada emitidos. Isso é útil quando se for criar builds SSR customizadas em plugins ou integrações.
- `entryPoints` mapeia uma rota de página para o arquivo físico emitido após a build.
- `middlewareEntryPoint` é o caminho de arquivo no sistema do arquivo do middleware;

```js
'astro:build:ssr'?: (options: {
    manifest: SerializedSSRManifest,
    entryPoints: Map<RouteData, URL>,
    middlewareEntryPoint: URL
}) => void | Promise<void>;
```

### `astro:build:done`

**Hook anterior:** [`astro:build:ssr`](#astrobuildssr)

**Quando:** Após a build para produção (SSG ou SSR) tiver sido completada.

**Por que:** Para acessar rotas geradas e assets para extensão (ex. copiar conteúdo do diretório gerado `/assets`). Se você planeja transformar assets gerados, nós recomendados explorar a [API de Plugins Vite](https://vitejs.dev/guide/api-plugin.html) e [configurá-la via `astro:config:setup`](#opção-updateconfig) no lugar.

```js
'astro:build:done'?: (options: { dir: URL; routes: RouteData[], pages: { pathname: string }[] }) => void | Promise<void>;
```

#### Opção `dir`

**Tipo:** [`URL`](https://developer.mozilla.org/pt-BR/docs/Web/API/URL)

Um caminho de URL para o diretório final da build. Note que se você precisa de uma string de caminho absoluto válida, você deve utilizar o utilitário [`fileURLToPath`](https://nodejs.org/api/url.html#urlfileurltopathurl) do Node.

```js
import { writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';

export default function minhaIntegracao() {
  return {
    hooks: {
      'astro:build:done': async ({ dir }) => {
        const metadados = await getIntegrationMetadata();
        // Utilize fileURLToPath para conseguir uma string válida e multiplataforma do caminho absoluto.
        const arquivoSaida = fileURLToPath(new URL('./minha-integracao.json', dir));
        await fs.writeFile(arquivoSaida, JSON.stringify(metadados));
      }
    }
  }
}
```

#### Opção `routes`

**Tipo:** [`RouteData[]`](#referência-do-tipo-routedata)

Uma lista de todas as rotas geradas junto de seus metadados associados.

Você pode ver a referência completa do tipo `RouteData` abaixo, mas as propriedades mais comuns são:

- `component` - o caminho do arquivo de entrada relativo à raiz do projeto
- `pathname` - a URL de saída do arquivo (undefined para rotas utilizando parâmetros `[dinâmicos]` e `[...spread]`)

##### Referência do tipo `RouteData`

```ts
interface RouteData {
  /** Se a rota dada é uma página HTML ou um endpoint não-HTML */
  type: 'page' | 'endpoint';
  /** URL da fonte do componente */
  component: string;
  /**
   * Nome de caminho da URL de saída onde esta rota será servida
   * nota: será undefined para rotas [dinâmicas] e [...spread]
   */
  pathname?: string;
  /** 
   * regex usado para corresponder A uma URL de entrada contra a rota requisitada
   * ex. "[fruta]/sobre.astro" irá gerar o pattern: /^\/([^/]+?)\/sobre\/?$/
   * aonde pattern.test("fruta/sobre") é "true"
   */
  pattern: RegExp;
  /**
   * Parâmetros dinâmicos e spread da rota
   * ex. "/pages/[lang]/[..slug].astro" irá retornar os parâmetros ['lang', '...slug']
   */
  params: string[];
  /**
   * Similar ao campo "params", mas com mais metadados associados
   * ex. "/pages/[lang]/index.astro" irá retornar os segmentos
   * [[ { content: 'lang', dynamic: true, spread: false } ]]
   */
  segments: { content: string; dynamic: boolean; spread: boolean; }[][];
  /** 
   * Função para renderizar o componente no lugar a partir de um conjunto de dados de entrada.
   * Isto é tipicamente para uso interno, portanto utilize com cuidado!
   */
  generate: (data?: any) => string;
}
```

#### Opção `pages`

**Tipo:** `{ pathname: string }[]`

Uma lista de todas as páginas geradas. É um objeto com uma propriedade.

- `pathname` - o caminho finalizado da página.

## Permitindo instalação via `astro add`

[O comando `astro add`](/pt-br/reference/cli-reference/#astro-add) permite que usuários facilmente adicionem integrações e adaptadores em seus projetos. Se você quiser que _sua_ integração seja instalável com essa ferramenta, **adicione `astro-integration` no campo `keywords` do seu `package.json`**:

```json
{
  "name": "exemplo",
  "keywords": ["astro-integration"],
}
```

Assim que você [publicar sua integração no npm](https://docs.npmjs.com/cli/v8/commands/npm-publish), executar `astro add exemplo` irá instalar seu pacote com quaisquer dependências de pares especificadas em seu `package.json`. Isso também irá adicionar sua integração ao `astro.config` do usuário dessa forma:

```diff
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import exemplo from 'exemplo';

export default defineConfig({
+  integrations: [exemplo()],
})
```

:::caution
Isso assume que a definição da sua integração é 1) uma exportação `default` e 2) uma função. Garanta de que isso é verdade antes de adicionar a palavra-chave `astro-integration`!
:::

## `AstroIntegrationLogger`

Uma instância do Astro logger, útil para escrever logs. Esse logger usa o mesmo [nível de log](/pt-br/reference/cli-reference/#--verbose)
configurado pelo CLI.

**Métodos disponíveis** para escrever no terminal:
- `logger.info("Mensagem")`;
- `logger.warn("Mensagem")`;
- `logger.error("Mensagem")`;
- `logger.debug("Mensagem")`;

Todas as mensagens são precedidas com um rótulo que possui o mesmo valor da integração.

```ts title="integracao.ts" {8}
import type { AstroIntegration } from "astro";
export function integraocaoFormat(): AstroIntegration {
    return {
        name: "astro-format",
        hooks: {
            "astro:build:done": (options, { logger }) => {
                // faça algo
                logger.info("Integração pronta.");
            }
        }
    }
}
```

O exemplo acima registrará uma mensagem que inclui a mensagem `info` fornecida:

```shell
[astro-format] Integração pronta.
```

Para registrar algumas mensagens com um rótulo diferente, use o método `.fork` para especificar uma alternativa ao `name` padrão:

```ts title="integracao.ts" ".fork"
import type { AstroIntegration } from "astro";
export function integracaoFormat(): AstroIntegration {
    return {
        name: "astro-format",
        hooks: {
            "astro:config:done": ({ logger }) => {
                // faça algo
                logger.info("Integração pronta.");
            },
            "astro:build:done": ({ logger }) => {
                const buildLogger = logger.fork("astro-format/build");
                // faça algo
                buildLogger.info("Build terminado.")
            }
        }
    }
}
```

O exemplo acima produzirá logs com `[astro-format]` por padrão e `[astro-format/build]` quando especificado:

```shell
[astro-format] Integração pronta.
[astro-format/build] Build terminado.
```

## Ordenação de Integrações

Todas as integrações são executadas na ordem em que são configuradas. Por exemplo, para o array `[react(), svelte()]` na `astro.config.*` de um usuário, `react` será executado antes de `svelte`.

Sua integração deve idealmente ser executável em qualquer ordem. Se isso não for possível nós recomendados documentar que sua integração precisar vir como primeira ou última no array de configuração `integrations` do seu usuário.

## Combinar integrações em presets

Uma integração também pode ser escrita como uma coleção de múltiplas, menores integrações. Nós chamamos estas coleções de **presets**. Ao invés de criar uma função de factory que retorna o objeto de uma única integração, um preset retorna um *array* de objetos de integração. Isso é útil para construir funcionalidades complexas a partir de múltiplas integrações.

```js
integrations: [
  // Exemplo: aonde presetExemplo() retorna: [integracaoUm, integracaoDois, ...etc]
  presetExemplo()
]
```
